<template>
   <div class="warehouse-details">
      <el-drawer
         v-model="dialogVisible"
         title="仓库详情"
         size="1200px"
         :with-header="false"
         direction="rtl"
      >
         <div class="drawer-header">
            <div class="title">{{ props.dialogRow.title || "HK2403050001" }}</div>
         </div>

         <div class="drawer-content">
            <div class="tab-header">
               <div class="warehouse-info">
                  <div class="info-item">
                     <div class="label">收款金额</div>
                     <div class="value">{{ props.dialogRow.code || "10000" }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">收款日期</div>
                     <div class="value">{{ props.dialogRow.manager || "2024-01-01" }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">收款方式</div>
                     <div class="value">{{ props.dialogRow.phone || "现金" }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">备注</div>
                     <div class="value">{{ props.dialogRow.address || "优质供应商" }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">订单类型</div>
                     <div class="value">{{ props.dialogRow.address || "销售订单" }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">出库单/采购退货单</div>
                     <div class="value">{{ props.dialogRow.address || "5641312316515" }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">出库/采购退货日期</div>
                     <div class="value">{{ props.dialogRow.house_type_name || "2024-01-01" }}</div>
                  </div>
               </div>
            </div>

            <div class="tab-container">
               <el-tabs v-model="activeTab">
                  <el-tab-pane
                     label="基础信息"
                     name="basic"
                  >
                     <div class="info-section">
                        <div class="section-title">
                           <el-icon>
                              <ArrowDown />
                           </el-icon>
                           <span>基础信息</span>
                        </div>
                        <div class="info-grid">
                           <div class="info-row">
                              <div class="info-col">
                                 <span class="label">订单类型</span>
                                 <span class="value">{{ props.dialogRow.title || "XXXX仓库" }}</span>
                              </div>
                              <div class="info-col">
                                 <span class="label">采购单/出库退货单</span>
                                 <span class="value">{{ props.dialogRow.code || "XXXXXX" }}</span>
                              </div>
                           </div>
                           <div class="info-row">
                              <div class="info-col">
                                 <span class="label">采购/出库退货日期</span>
                                 <span class="value">{{ props.dialogRow.house_type_name || "汽车用品" }}</span>
                              </div>
                              <div class="info-col">
                                 <span class="label">供应商/客户</span>
                                 <span class="value">{{ props.dialogRow.manager || "于非鱼" }}</span>
                              </div>
                           </div>
                           <div class="info-row">
                              <div class="info-col">
                                 <span class="label">采购/出库退货负责人</span>
                                 <span class="value">{{ props.dialogRow.phone || "18113994914" }}</span>
                              </div>
                              <div class="info-col">
                                 <span class="label">联系电话</span>
                                 <span class="value">{{ props.dialogRow.address || "XXX路1号" }}</span>
                              </div>
                           </div>
                           <div class="info-row">
                              <div class="info-col full-width">
                                 <span class="label">总金额</span>
                                 <span class="value">{{ props.dialogRow.remark || "优质供应商" }}</span>
                              </div>
                              <div class="info-col full-width">
                                 <span class="label">待付款金额(元)</span>
                                 <span class="value">{{ props.dialogRow.remark || "优质供应商" }}</span>
                              </div>
                           </div>
                           <div class="info-row">
                              <div class="info-col full-width">
                                 <span class="label">状态</span>
                                 <span class="value">{{ props.dialogRow.remark || "优质供应商" }}</span>
                              </div>
                              <div class="info-col full-width">
                                 <span class="label">备注</span>
                                 <span class="value">{{ props.dialogRow.remark || "优质供应商" }}</span>
                              </div>
                           </div>
                        </div>
                     </div>

                     <div class="info-section">
                        <div class="section-title">
                           <el-icon>
                              <ArrowDown />
                           </el-icon>
                           <span>系统信息</span>
                        </div>
                        <div class="info-grid">
                           <div class="info-row">
                              <div class="info-col">
                                 <span class="label">创建人：</span>
                                 <span class="value">{{ props.dialogRow.creator || "张三" }}</span>
                              </div>
                              <div class="info-col">
                                 <span class="label">创建时间：</span>
                                 <span class="value">{{ props.dialogRow.create_time || "2023-12-01 13:32" }}</span>
                              </div>
                           </div>
                           <div class="info-row">
                              <div class="info-col">
                                 <span class="label">修改人：</span>
                                 <span class="value">{{ props.dialogRow.modifier || "傅彭涛" }}</span>
                              </div>
                              <div class="info-col">
                                 <span class="label">修改时间：</span>
                                 <span class="value">{{ props.dialogRow.update_time || "2024-02-02 11:16" }}</span>
                              </div>
                           </div>
                        </div>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane
                     label="付款记录"
                     name="inbound-record"
                  >
                     <div class="record-content">
                        <div class="search-bar">
                           <el-input
                              v-model="recordSearch"
                              placeholder="付款单号/付款方式"
                              style="width: 300px"
                           >
                              <template #prefix>
                                 <el-icon>
                                    <Search />
                                 </el-icon>
                              </template>
                           </el-input>
                        </div>

                        <div class="record-list inbound-list">
                           <el-table
                              :data="recordList"
                              border
                              style="width: 100%"
                           >
                              <el-table-column
                                 label="付款单号"
                                 prop="recordNo"
                                 width="180"
                              />
                              <el-table-column
                                 label="本次付款金额"
                                 prop="type"
                                 width="100"
                              />
                              <el-table-column
                                 label="付款日期"
                                 prop="date"
                                 width="120"
                              />
                              <el-table-column
                                 label="付款方式"
                                 prop="warehouse"
                                 width="150"
                              />
                              <el-table-column
                                 label="审核状态"
                                 prop="warehouseCode"
                                 width="120"
                              />
                              <el-table-column
                                 label="审核人"
                                 prop="warehouseType"
                                 width="120"
                              />
                              <el-table-column
                                 label="审核日期"
                                 prop="manager"
                                 width="100"
                              />
                              <el-table-column
                                 label="审核说明"
                                 prop="phone"
                                 width="120"
                              />
                              <el-table-column
                                 label="备注"
                                 prop="remark"
                              />
                           </el-table>
                        </div>

                        <div class="pagination">
                           <!-- <el-pagination v-model:current-page="recordPage" v-model:page-size="recordPageSize"
                                            :page-sizes="[10, 20, 50, 100]" :total="recordTotal"
                                            layout="total, sizes, prev, pager, next, jumper" /> -->
                           <Pagination
                              v-model:current-page="recordPage"
                              v-model:page-size="recordPageSize"
                              :page-sizes="[10, 20, 50, 100]"
                              :total="recordTotal"
                              layout="total, sizes, prev, pager, next, jumper"
                           />
                        </div>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane
                     label="附件"
                     name="outbound-record"
                  >
                     <div class="record-content">
                        <div class="search-bar">
                           <el-input
                              v-model="outboundRecordSearch"
                              placeholder="文件名/上传人"
                              style="width: 300px"
                           >
                              <template #prefix>
                                 <el-icon>
                                    <Search />
                                 </el-icon>
                              </template>
                           </el-input>
                        </div>

                        <div class="record-list inbound-list">
                           <el-table
                              :data="outboundRecordList"
                              border
                              style="width: 100%"
                           >
                              <el-table-column
                                 label="文件名"
                                 prop="recordNo"
                                 width="auto"
                              />
                              <el-table-column
                                 label="类型"
                                 prop="type"
                                 width="auto"
                              />
                              <el-table-column
                                 label="文件大小"
                                 prop="relatedOrder"
                                 width="auto"
                              />
                              <el-table-column
                                 label="上传人"
                                 prop="date"
                                 width="auto"
                              />
                              <el-table-column
                                 label="创建时间"
                                 prop="create_time"
                                 width="auto"
                              />
                              <el-table-column
                                 label="操作"
                                 prop="supplier"
                                 width="auto"
                              >
                                 <template #default>
                                    <el-button
                                       link
                                       type="primary"
                                       >预览</el-button
                                    >
                                    <el-button
                                       link
                                       type="danger"
                                       >下载</el-button
                                    >
                                 </template>
                              </el-table-column>
                           </el-table>
                        </div>

                        <div class="pagination">
                           <!-- <el-pagination v-model:current-page="outboundRecordPage"
                                        v-model:page-size="outboundRecordPageSize" :page-sizes="[10, 20, 50, 100]"
                                        :total="outboundRecordTotal" layout="total, sizes, prev, pager, next, jumper" /> -->
                           <Pagination
                              v-model:current-page="outboundRecordPage"
                              v-model:page-size="outboundRecordPageSize"
                              :page-sizes="[10, 20, 50, 100]"
                              :total="outboundRecordTotal"
                              layout="total, sizes, prev, pager, next, jumper"
                           />
                        </div>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane
                     label="操作记录"
                     name="consumables"
                  >
                     <div class="consumables-content">
                        <el-table
                           :data="consumablesList"
                           style="width: 100%"
                        >
                           <el-table-column
                              prop="name"
                              width="250"
                              align="center"
                           />
                           <el-table-column
                              prop="name"
                              width="250"
                              align="center"
                           />
                           <el-table-column
                              prop="name"
                              width="250"
                              align="center"
                           />
                           <el-table-column
                              prop="name"
                              width="250"
                              align="center"
                           />
                        </el-table>
                     </div>
                  </el-tab-pane>
               </el-tabs>
            </div>
         </div>
      </el-drawer>

      <!-- <ConsumablesSetup ref="consumablesSetupRef"  v-model:dialogVisible="isShow" :dialogType="dialogType" :dialogRow="dialogRow"  /> -->
   </div>
</template>

<script setup lang="ts">
   import { ref, computed } from "vue";
   import { ArrowDown, Close, Search, RefreshRight, Download, Plus, Expand, Fold } from "@element-plus/icons-vue";
   // import ConsumablesSetup from './ConsumablesSetup.vue';

   import Pagination from "@/components/Pagination.vue";
   const props = defineProps({
      dialogVisible: {
         type: Boolean,
         default: false,
      },
      dialogRow: {
         type: Object,
         default: () => ({}),
      },
   });
   const isShow = ref<boolean>(false);
   let dialogType = ref<string>("");
   let dialogRow = ref<any>({});
   const emit = defineEmits(["update:dialogVisible"]);

   const dialogVisible = computed({
      get: () => props.dialogVisible,
      set: (val) => emit("update:dialogVisible", val),
   });

   const activeTab = ref("basic");

   const searchKeyword = ref("");
   const currentPage = ref(1);
   const pageSize = ref(10);
   const total = ref(0);

   const inboundSearch = ref("");
   const inboundStatus = ref("all");
   const inboundPage = ref(1);
   const inboundPageSize = ref(10);
   const inboundTotal = ref(0);

   const recordSearch = ref("");
   const recordPage = ref(1);
   const recordPageSize = ref(10);
   const recordTotal = ref(0);

   // 产品库存数据
   const productList = ref([
      {
         name: "华为笔记本电脑",
         code: "HWPC0001",
         model: "MateBook 15 D",
         unit: "个",
         stock: 680,
         minStock: 100,
         maxStock: 1000,
         image: "https://example.com/image1.jpg",
      },
      {
         name: "罗技鼠标",
         code: "LGSB00012",
         model: "g520",
         unit: "个",
         stock: 5000,
         minStock: 1000,
         maxStock: 8000,
         image: "https://example.com/image2.jpg",
      },
   ]);

   // 入库单数据
   const inboundList = ref([
      {
         type: "采购单",
         orderNo: "CG240212001",
         date: "2022-06-02",
         supplier: "供应商一",
         manager: "刘一",
         phone: "13567890980",
         status: "pending",
         statusText: "未入库",
         remark: "--",
      },
   ]);

   // 入库记录数据
   const recordList = ref([
      {
         recordNo: "CGRK240302001",
         type: "采购单",
         relatedOrder: "CG240212001",
         warehouse: "仓库一",
         warehouseCode: "120001",
         warehouseType: "电器库房",
         date: "2022-06-02",
         manager: "傅彭涛",
         phone: "13812345678",
         address: "南区112号",
      },
   ]);
   let inboundStatusData = ref("pending");
   const handleShowInbound = (status: string) => {
      inboundStatusData.value = status;
   };

   // 出库单数据
   const outboundList = ref([
      {
         type: "销售单",
         orderNo: "XS240212001",
         date: "2022-06-02",
         customer: "客户一",
         manager: "王五",
         phone: "13567890981",
         status: "pending",
         statusText: "未出库",
         remark: "--",
      },
   ]);
   let outboundStatusData = ref("pending");
   const handleShowOutbound = (status: string) => {
      outboundStatusData.value = status;
   };

   // 出库记录数据
   const outboundRecordList = ref([
      {
         recordNo: "XSCK240302001",
         type: "销售单",
         relatedOrder: "XS240212001",
         warehouse: "仓库一",
         warehouseCode: "120001",
         warehouseType: "电器库房",
         date: "2022-06-02",
         manager: "傅彭涛",
         phone: "13812345678",
         address: "南区112号",
      },
   ]);

   // 出库相关的分页和搜索数据
   const outboundSearch = ref("");
   const outboundStatus = ref("all");
   const outboundPage = ref(1);
   const outboundPageSize = ref(10);
   const outboundTotal = ref(0);

   const outboundRecordSearch = ref("");
   const outboundRecordPage = ref(1);
   const outboundRecordPageSize = ref(10);
   const outboundRecordTotal = ref(0);

   // 库存盘点数据
   const stockCheckList = ref([
      {
         checkNo: "PD240302001",
         date: "2024-03-02",
         checker: "张三",
         productCount: 100,
         profitCount: 2,
         lossCount: 1,
         status: "draft",
         statusText: "草稿",
         remark: "月度盘点",
      },
   ]);
   let stockCheckStatusData = ref("pending");
   const handleShowStockCheck = (status: string) => {
      stockCheckStatusData.value = status;
   };

   // 库存调拨数据
   const stockTransferList = ref([
      {
         transferNo: "DB240302001",
         fromWarehouse: "仓库一",
         toWarehouse: "仓库二",
         date: "2024-03-02",
         operator: "李四",
         productCount: 50,
         status: "pending",
         statusText: "待确认",
         remark: "常规调拨",
      },
   ]);
   let stockTransferStatusData = ref("pending");
   const handleAddStockTransfer = (status: string) => {
      stockTransferStatusData.value = status;
   };

   // 盘点相关数据
   const stockCheckSearch = ref("");
   const stockCheckPage = ref(1);
   const stockCheckPageSize = ref(10);
   const stockCheckTotal = ref(0);

   // 调拨相关数据
   const stockTransferSearch = ref("");
   const stockTransferPage = ref(1);
   const stockTransferPageSize = ref(10);
   const stockTransferTotal = ref(0);

   // 盘点状态类型
   const getStockCheckStatusType = (status: string) => {
      const typeMap = {
         draft: "",
         submitted: "warning",
         completed: "success",
      };
      return typeMap[status] || "info";
   };

   // 调拨状态类型
   const getTransferStatusType = (status: string) => {
      const typeMap = {
         pending: "warning",
         confirmed: "success",
         rejected: "danger",
      };
      return typeMap[status] || "info";
   };

   // 盘点相关方法
   const handleCreateStockCheck = () => {
      // 实现新建盘点逻辑
   };

   const handleEditStockCheck = (row: any) => {
      // 实现编辑盘点逻辑
   };

   const handleSubmitStockCheck = (row: any) => {
      // 实现提交盘点逻辑
   };

   const handleDeleteStockCheck = (row: any) => {
      // 实现删除盘点逻辑
   };

   const handleViewStockCheck = (row: any) => {
      // 实现查看盘点逻辑
   };

   // 调拨相关方法
   const handleCreateTransfer = () => {
      // 实现新建调拨逻辑
   };

   const handleConfirmTransfer = (row: any) => {
      // 实现确认调拨逻辑
   };

   const handleRejectTransfer = (row: any) => {
      // 实现拒绝调拨逻辑
   };

   const handleViewTransfer = (row: any) => {
      // 实现查看调拨逻辑
   };

   // 耗材数据
   const consumablesList = ref([
      {
         name: "标准洗车",
      },
      {
         name: "精致洗车",
      },
      {
         name: "杀菌消毒",
      },
      {
         name: "内饰清洗",
      },
      {},
   ]);

   // 耗材相关数据
   const consumablesSearch = ref("");
   const consumablesPage = ref(1);
   const consumablesPageSize = ref(10);
   const consumablesTotal = ref(0);

   // 耗材相关方法
   const handleAddConsumable = () => {
      // 实现添加耗材逻辑
   };

   const handleEditConsumable = (row: any) => {
      // 实现编辑耗材逻辑
      isShow.value = true;
      dialogType.value = "edit";
      dialogRow.value = row;
   };

   const handleDeleteConsumable = (row: any) => {
      // 实现删除耗材逻辑
   };

   // 产品分组相关数据
   const isCollapsed = ref(false);
   const showSearch = ref(false);
   const categorySearch = ref("");
   const activeCategory = ref("1");

   // 模拟的分组数据
   const categories = ref([
      { id: "1", name: "分组一" },
      { id: "2", name: "分组二" },
      { id: "3", name: "分组三" },
      { id: "4", name: "分组四" },
      { id: "5", name: "分组五" },
      { id: "6", name: "分组六" },
   ]);

   // 过滤后的分组列表
   const filteredCategories = computed(() => {
      if (!categorySearch.value) return categories.value;
      return categories.value.filter((category) => category.name.toLowerCase().includes(categorySearch.value.toLowerCase()));
   });

   // 切换搜索框显示状态
   const toggleSearch = () => {
      showSearch.value = !showSearch.value;
   };

   // 处理分组选择
   const handleCategorySelect = (index: string) => {
      activeCategory.value = index;
      // 这里可以根据选中的分组ID加载对应的产品列表
   };
</script>

<style lang="scss" scoped>
   ::v-deep .inventory-layout .product-category .category-list .el-menu-item.is-active {
      color: #6860ff !important;
      background-color: #6860ff15 !important;
   }

   //表格样式
   ::v-deep .product-list {
      .el-table {
         --el-table-header-bg-color: rgba(235, 236, 240, 1);

         th {
            color: #444;
            font-weight: bold;
         }
      }
   }

   //表格样式
   ::v-deep .inbound-list {
      .el-table {
         --el-table-header-bg-color: rgba(235, 236, 240, 1);

         th {
            color: #444;
            font-weight: bold;
         }
      }
   }

   //分页样式
   .pagination {
      width: calc(100% - 1000px);
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding-top: 10px;
   }

   .warehouse-details {
      .drawer-header {
         padding: 16px 20px;
         border-bottom: 1px solid #e4e7ed;
         display: flex;
         justify-content: space-between;
         align-items: center;

         .title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
         }
      }

      .drawer-content {
         height: calc(100% - 60px);
         overflow-y: auto;

         .tab-header {
            padding: 20px;
            background-color: #f5f7fa;

            .warehouse-info {
               display: flex;
               flex-wrap: wrap;
               justify-content: space-evenly;

               .info-item {
                  min-width: 140px;

                  .label {
                     color: #909399;
                     margin-right: 8px;
                     margin-bottom: 4px;
                  }

                  .value {
                     color: #333;
                     font-weight: 500;
                     font-size: 14px;
                  }
               }
            }
         }

         .tab-container {
            padding: 20px;

            :deep(.el-tabs__header) {
               margin-bottom: 20px;
            }
         }

         .info-section {
            margin-bottom: 24px;

            .section-title {
               background-color: #f5f7fa;
               padding: 12px 10px;
               display: flex;
               align-items: center;
               gap: 8px;
               margin-bottom: 16px;
               font-size: 14px;
               font-weight: bold;
               color: #333;

               .el-icon {
                  font-size: 16px;
                  color: #626aef;
               }
            }

            .info-grid {
               padding: 16px;
               border-radius: 4px;

               .info-row {
                  display: flex;
                  margin-bottom: 16px;

                  &:last-child {
                     margin-bottom: 0;
                  }

                  .info-col {
                     flex: 1;
                     display: flex;
                     align-items: center;

                     &.full-width {
                        flex: 2;
                     }

                     .label {
                        width: 80px;
                        color: #909399;
                        flex-shrink: 0;
                        margin-left: 10px;
                     }

                     .value {
                        color: #333;
                        flex: 1;
                        display: inline-block;
                        padding: 6px;
                        font-size: 14px;
                        background-color: #f5f7fa;
                     }
                  }
               }
            }
         }
      }
   }

   :deep(.el-drawer) {
      .el-drawer__body {
         padding: 0;
      }
   }

   :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
   }

   :deep(.el-tabs__active-bar) {
      background-color: #626aef;
   }

   :deep(.el-tabs__item.is-active) {
      color: #626aef;
   }

   :deep(.el-tabs__item:hover) {
      color: #626aef;
   }

   .search-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .right-buttons {
         display: flex;
         gap: 8px;
      }

      .filter-buttons {
         margin-left: 16px;
      }
   }

   .product-list,
   .inbound-list,
   .record-list {
      margin-bottom: 16px;
   }

   .pagination {
      display: flex;
      justify-content: flex-end;
      padding: 16px 0;
   }

   :deep(.el-table) {
      --el-table-header-bg-color: #f5f7fa;

      th {
         background-color: var(--el-table-header-bg-color);
         color: #606266;
         font-weight: 500;
      }
   }

   :deep(.el-button) {
      &.is-plain {
         &:hover {
            color: #626aef;
            border-color: #626aef;
         }
      }
   }

   :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
      background-color: #626aef;
      border-color: #626aef;
      box-shadow: -1px 0 0 0 #626aef;
   }

   .inventory-layout {
      display: flex;
      height: 100%;

      .product-category {
         width: 200px;
         border-right: 1px solid var(--el-border-color-light);
         transition: width 0.3s;
         background-color: rgb(245, 247, 249);
         padding: 0px 12px;
         margin-right: 10px;

         &.is-collapsed {
            width: 0;
            overflow: hidden;
         }

         .category-header {
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--el-border-color-light);

            .header-title {
               display: flex;
               align-items: center;
               gap: 90px;
               justify-content: space-between;
               font-size: 14px;
               font-weight: 500;
            }
         }

         .category-search {
            padding: 12px;
            border-bottom: 1px solid var(--el-border-color-light);
         }

         .category-list {
            .el-menu {
               border-right: none;
            }

            .el-menu-item {
               height: 40px;
               line-height: 40px;

               &.is-active {
                  background-color: var(--el-color-primary-light-9);
                  color: var(--el-color-primary);
               }
            }
         }
      }

      .product-content {
         flex: 1;

         transition: margin-left 0.3s;

         &.is-expanded {
            margin-left: 0;
         }

         .search-bar {
            margin-bottom: 16px;
         }
      }
   }

   // 表格样式优化
   .product-list {
      :deep(.el-table) {
         --el-table-header-bg-color: #f5f7fa;

         th {
            background-color: var(--el-table-header-bg-color);
            color: #606266;
            font-weight: 500;
         }
      }
   }
</style>
